
<!-- 自定义组件 -->
<template>
    <el-card class="box-card">
        <div class="model-role">
            <!-- 搜索栏 表单组件 -->
            <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                <el-form-item label="菜单名称">
                    <el-input v-model="queryForm.name" placeholder="请输入菜单名称" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="菜单中文名">
                    <el-input v-model="queryForm.label" placeholder="请输入菜单中文名称" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getDataList(1)">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="openDialog()">新增</el-button>
                </el-form-item>
            </el-form>
            <!-- 表格组件 -->
            <el-table :data="tableData" border style="width: 100%" row-key="menuId"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="menuId" label="ID" width="150"></el-table-column>
                <el-table-column prop="name" label="菜单名称" width="180"> </el-table-column>
                <el-table-column prop="label" label="菜单中文名" width="180"> </el-table-column>
                <el-table-column prop="path" label="路由path" width="200"> </el-table-column>
                <el-table-column prop="perms" label="perms" width="200"> </el-table-column>
                <el-table-column prop="parentId" label="父菜单编号" width="100"> </el-table-column>
                <el-table-column prop="type" label="类型" width="100">
                    <!-- <template slot-scope="scope">
                        <span>{{ scope.row.status == 1 ? "正常" : "禁用" }}</span>
                    </template> -->
                </el-table-column>
                <el-table-column prop="icon" label="图标" width="100"> </el-table-column>
                <el-table-column prop="orderNum" label="序号" width="100"> </el-table-column>
                <el-table-column label="操作">
                    <!-- 通过slot-scope="scope" 来获取当前行的索引 以及 行数据row -->
                    <template slot-scope="scope" width="180">
                        <el-button size="mini" type="primary" @click="openEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button :disabled="!scope.row.canbeDelete" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                :page-sizes="[5, 10, 20, 50, 100]" :page-size="pageSize" :total="totalCount"
                layout="total, sizes, prev, pager, next, jumper" style="margin-top:30px;">
            </el-pagination>
        </div>
        <el-dialog :title="dialogForm.menuId == null ? '新增菜单' : '编辑菜单'" :visible.sync="dialogFormVisible" width="35%"
            :close-on-click-modal="false" @closed="closedDialog">
            <!-- 表单添加校验规则： 
                    1、<el-form>中添加属性:rules="rules" 
                    2、在data() return数据中定义rules：{}规则
                    3、输入框所在的<el-form-item>中添加属性prop="roleName",与rules：{roleName：[]}规则中的属性名roleName一致
                    4、<el-form>中添加属性ref="dialogForm" 
                    5、在提交方法中使用this.$refs["dialogForm"].validate()使校验生效
                     注意：前三步完成可以使输入框提示校验信息，但是不能阻拦提交函数的执行。需要4,5步才可以。
                     -->
            <el-form :model="dialogForm" :rules="rules" ref="dialogForm">
                <el-form-item label="菜单名称" prop="name" label-width="110px">
                    <el-input v-model="dialogForm.name" placeholder="菜单名称" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜单中文名" prop="label" label-width="110px">
                    <el-input v-model="dialogForm.label" placeholder="菜单中文名" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="path" prop="path" label-width="110px">
                    <el-input v-model="dialogForm.path" placeholder="路由path" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图标" prop="icon" label-width="110px">
                    <el-input v-model="dialogForm.icon" placeholder="图标" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="序号" prop="orderNum" label-width="110px">
                    <el-input v-model="dialogForm.orderNum" placeholder="序号" autocomplete="off" type="number"></el-input>
                </el-form-item>
                <el-form-item label="是否为根菜单" label-width="110px">
                    <!-- 下拉框方式选择状态
                        <el-select v-model="dialogForm.status" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select> -->
                    <!-- switch方式 选择状态 -->
                    <el-switch v-model="isRootMenu" active-color="#13ce66" inactive-color="#ff4949" :active-value=1
                        :inactive-value=0 active-text="是" inactive-text="否" @change="switchChange()">
                    </el-switch>
                    <!-- <span> {{ dialogForm.status == 1 ? "启用" : "禁用" }}</span> -->
                </el-form-item>
                <el-form-item v-if="isRootMenu === 0" label="父菜单" prop="parentId" label-width="110px">
                    <el-select v-model="dialogForm.parentId" placeholder="请选择">
                        <el-option v-for="item in select_options" :key="item.menuId" :label="item.name"
                            :value="item.menuId">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitDialog()">确 定</el-button>
            </div>
        </el-dialog>
    </el-card>
</template>

<script>
export default {
    name: 'sysMenu',
    data() {

        return {
            //查询的 表单数据
            queryForm: {
                name: ""
            },
            //表格数据
            tableData: [],
            pageIndex: 1,
            pageSize: 5,
            totalCount: 0,//总条数
            dataListLoading: false, //表格数据查询处理中，避免频繁重复点击
            /** dialog对话框数据 */
            dialogFormVisible: false, //dialog对话框打开状态
            submitAddLoading: false, //避免重复提交的处理状态
            dialogForm: {  //对话框表单数据
                menuId: null,
                parentId: null
            },
            isRootMenu: 0,
            //父菜单下拉框
            select_options: [],
            //【表单校验规则】添加菜单
            rules: {
                name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
                label: [{ required: true, message: '请输入菜单中文名称', trigger: 'blur' }],
                // path: [{ required: true, message: '请输入path', trigger: 'blur' }], 根菜单没有地址
                orderNum: [{ required: true, message: '菜单排序编号', trigger: 'blur' }]
            }
        }
    },
    methods: {
        //查询事件
        getDataList(pageIndex) {
            /** 校验 重复操作 之后可以使用loading层解决*/
            if (this.dataListLoading) {
                //如果正在处理查询，则忽略本次点击
                return;
            }
            this.dataListLoading = true; //查询处理中
            /** 解决 页码虚高的问题  */
            //如果是点击查询按钮进来的，则从第一页开始查询，解决问题：之前查询了第n页数据，但是新输入的条件没有那么多数据，造成点击查询后显示第n页无数据的问题
            if (pageIndex) {
                this.pageIndex = pageIndex;
            }
            //声明params查询的参数
            const params = {
                pageIndex: this.pageIndex,
                pageSize: this.pageSize,
                name: this.queryForm.name,
                label: this.queryForm.label,
            };
            //debugger;
            //请求查询用户列表数据
            this.$http.get("/sys/sysMenu/list", { params: params }).then((res) => {
                //console.log("查询用户,服务返回", res);
                this.tableData = res.data.data.list;  //表格数据
                this.totalCount = res.data.data.totalCount;  //总条数
            }).catch(function (error) {
                console.log(error);
            })
            this.dataListLoading = false; //查询处理结束
        },
        // 分页-切换页容量
        sizeChangeHandle(pageSize) {
            this.pageSize = pageSize; //切换 pageSize
            this.pageIndex = 1; //切换size后跳转到第一页
            this.getDataList(); //刷新表格数据
        },
        // 分页-跳转指定页码
        currentChangeHandle(pageIndex) {
            this.pageIndex = pageIndex; //跳转到指定页
            this.getDataList(); //刷新表格数据
        },
        //打开【添加菜单】对话框
        openDialog() {
            this.getAllParentMenu();//获取所有父菜单数据提供给下拉菜单
            this.dialogFormVisible = true; //打开对话框
        },
        getAllParentMenu() {
            this.$http.get("/sys/sysMenu/listParentMenu").then((res) => {
                this.select_options = res.data.data;  //下拉框数据
            }).catch(function (error) {
                console.log(error);
            })
        },
        //监听 switch 开关状态更新
        switchChange() {
            if (this.isRootMenu === 1) {
                console.log("是根菜单");
                //this.dialogForm.parentId = null;
            } else {
                console.log("非根菜单");
            }

        },
        //提交对话框 添加/编辑用户数据
        submitDialog() {
            //获取对应表单并校验通过才可以提交，否则无法提交
            this.$refs["dialogForm"].validate((valid) => {
                if (valid) {
                    //处理中，直接忽略点击事件，避免重复点击
                    if (this.submitAddLoading) {
                        return;
                    }
                    this.submitAddLoading = true; //开始处理
                    //执行提交请求
                    this.doSubmitAdd();
                    this.submitAddLoading = false; //结束处理
                } else {
                    //校验不通过
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //真正校验表单后的提交
        doSubmitAdd() {
            this.$http.post("/sys/sysMenu/save", this.dialogForm).then((res) => {
                //console.log("保存账户,服务返回", res);
                this.dialogFormVisible = false; //关闭对话框
                this.getDataList(); //刷新表格当前页数据
            }).catch(function (error) {
                console.log(error);
            })
        },
        //打开用户编辑对话框
        openEdit(index, row) {
            // ※ 方法一： 不访问后台，直接回显页面表格的数据，数据不及时的弊端
            // this.dialogFormVisible = true; //打开对话框
            // // 回显对话框表单里的数据
            // this.dialogForm = {  //对话框表单数据
            //     userId: row.userId,  // 给个默认值，为了后续好判断
            //     username: row.username,
            //     //password: row.password, 隐藏密码
            //     email: row.email,
            //     mobile: row.mobile,
            //     status: row.status
            // };
            // ※ 方法二： 访问后台，回显数据库中最新的数据
            let params = {
                'menuId': row.menuId
            };
            this.$http.get("/sys/sysMenu/queryMenuById", { params: params }).then((res) => {
                console.log("queryMenuById返回", res);
                const menu = res.data.data;
                // 回显对话框表单里的数据
                this.dialogForm = {  //对话框表单数据
                    menuId: menu.menuId, //更新时，绑定菜单id。
                    //如果是根菜单，则回显的下拉框设置为null(待选择)。不然会回显0
                    parentId: menu.parentId == 0 ? null : menu.parentId,
                    name: menu.name,
                    label: menu.label,
                    path: menu.path,
                    icon: menu.icon,
                    orderNum: menu.orderNum,
                };
                this.isRootMenu = menu.parentId == 0 ? 1 : 0;

            }).catch(function (error) {
                console.log(error);
            })
            this.getAllParentMenu();//获取所有父菜单数据提供给下拉菜单
            //打开对话框
            this.dialogFormVisible = true;
        },
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = new FormData();
                //alert(row.userId)
                params.append('menuId', row.menuId);
                this.$http.post("/sys/sysMenu/deleteById", params).then((res) => {
                    console.log("deleteById返回", res);
                    if (res.data.code != "SUCCESS") {
                        this.$message.error(res.data.message);
                        return;
                    }
                    this.$message({
                    type: 'success',
                    message: '删除成功111!'
                });
                }).catch(function (error) {
                    console.log(error);
                })
                this.getDataList();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //监听对话框关闭完成事件，关闭后执行, 包括点击关闭+取消都会触发 
        closedDialog() {
            //console.log("监听关闭对话框，清除数据")
            //清除对话框表单中的数据
            this.dialogForm = {  //对话框表单数据
                menuId: null,  // 给个默认值，为了后续好判断
                // ...,  ※清空表单数据，这些属性可以省略赋值，默认为unfind
            };
            this.isRootMenu = 0; //是否为根菜单
            // Element UI 自带清除表单方法
            this.$refs["dialogForm"].resetFields(); // 重置表单移除校验消息
            //扩展： this.$refs[formName].clearValidate(); // 仅清除验证
        }
    }, mounted() {
        this.getDataList();
    }
}
</script>